import { useEffect, useState } from 'react';

// 导入样式
import './Counter.css';

export const App = () => {
  // 组件的另外一个状态
  const [number, setNumber] = useState(0);
  console.log('父');
  useEffect(() => {
    console.log('父组件的 Effect 执行了');
  });
  return (
    <div>
      <div>{(() => console.log('App父组件 render1'))()}</div>
      {number > 3 ? null : <Counter />}
      <div>{(() => console.log('App父组件 render2'))()}</div>
      <hr />
      <h1>父：{number}</h1>
      <button onClick={() => setNumber(number + 1)}>Number+1</button>
    </div>
  );
};

// 函数组件, 使用 hooks api 添加组件状态
const Counter = () => {
  // 引入状态，状态初始值：0
  // 在组件内定义状态变量：count
  // 在组件内定义了修改状态的函数：setCount
  const [count, setCount] = useState(10);
  console.log('子');
  // 执行一个Effect 副作用，暗含的意思和 渲染UI不相关的操作
  useEffect(() => {
    console.log('count effect 执行了');
    // 这个函数执行 Effect 操作，更新浏览器的title栏
    document.title = count;

    return () => {
      console.log('count effect 的清理函数');
    };
  }, [count]);

  return (
    <div>
      <div>{(() => console.log('Counter子组件 render'))()}</div>
      <h1 className="title">子：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};
